<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">{{ title }}</span>
        <el-button
          style="float: right"
          size="mini"
          type="primary"
          @click="() => handleSave(false)"
          >保存</el-button
        >
        <el-button
          style="float: right; margin-right: 10px"
          size="mini"
          v-if="!this.id"
          @click="() => handleSave(true)"
          >保存并新增</el-button
        >
      </div>
      <div class="text item">
        <el-form
          :model="expenseItem"
          :rules="rules"
          ref="expenseItemForm"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="编号" prop="code">
            <el-input v-model="expenseItem.code"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="expenseItem.name"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
              <type-select v-model="expenseItem.type" size="mini">
              </type-select>
          </el-form-item>
          <el-form-item label="激活" prop="activated">
            <el-switch v-model="expenseItem.activated"> </el-switch>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getExpenseItem, addExpenseItem, updateExpenseItem } from "@/api/expenseItem";
import typeSelect from "@/components/Select/expenseItemTypeSelect.vue";
export default {
  components:{
    typeSelect
  },
  data() {
    return {
      expenseItem: { id: null, code: "", name: "", type: null, activated: true },
      rules: {
        code: [{ required: true, message: "请填写编号", trigger: "blur" }],
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择费用类型", trigger: "blur" }],
      },
      title: "",
    };
  },
  methods: {
    getData() {
      if (!this.id) return;
      getExpenseItem(this.id).then((res) => {
        this.expenseItem = res || {};
      });
    },
    handleSave(afterAdd) {
      this.$refs.expenseItemForm.validate((valid) => {
        if (valid) {
          this.saveData(afterAdd);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveData(afterAdd) {
      if (!this.id) {
        addExpenseItem(this.expenseItem).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.expenseItem = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      } else {
        updateExpenseItem(this.expenseItem).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.expenseItem = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      }
    },
  },
  mounted() {
    this.title = this.id ? "编辑" : "新增";
    this.getData();
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped></style>
